<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>管理页面代码模版</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../layuiadmin/style/admin.css" media="all">
    <script type="text/javascript" src="../../js/jquery-3.4.1.js"></script>
</head>
<body>
<!--流式布局-->
<div class="layui-fluid">
    <div class="layui-card">
        <!-- head: 数据表格搜索 -->
        <div class="layui-header">
            <div class="layui-form layui-form-pane">
                <!-- 搜索条件input -->
                <!-- 搜索按钮，已经使用表格的toolbar -->
            </div>
        </div>        <!-- body: 数据表格（工具条、表格内容） -->
        <!-- 表格头工具按钮组-->
        <div id="LAY-table-bar" class="layui-btn-group layui-hide">
            <button type="button" class="layui-btn layui-btn-radius layui-btn-normal" lay-event="add">
                <i class="layui-icon">&#xe642;添加</i>
            </button>
            <button type="button" class="layui-btn layui-btn-radius layui-btn-normal" lay-submit lay-event="search">
                <i class="layui-icon">&#xe615;查询</i>
            </button>
            <button type="button" class="layui-btn layui-btn-radius layui-btn-danger" lay-event="batch_del">
                <i class="layui-icon">&#xe640;批量</i>
            </button>
        </div>
        <div class="layui-card-body">
            <table id="LAY-table" class="layui-table layui-inline" lay-filter="LAY-table"></table>
        </div>
        <!-- other: 表格行数据按钮组-->
        <div id="LAY-table-row-bar" class="layui-btn-group layui-hide">
            <!--<button type="button" class="layui-btn layui-btn-xs layui-btn-radius layui-btn-normal" lay-event="authorize">
                <i class="layui-icon">&#xe642;授权</i>
            </button>-->
            <button type="button" class="layui-btn layui-btn-xs layui-btn-radius layui-btn-normal" lay-event="edit">
                <i class="layui-icon">&#xe642;编辑</i>
            </button>
            <button type="button" class="layui-btn layui-btn-xs layui-btn-radius layui-btn-danger" lay-event="del">
                <i class="layui-icon">&#xe640;删除</i>
            </button>
        </div>
    </div>
</div>

<script type="text/javascript" src="../../layuiadmin/layui/layui.all.js"></script>
<script type="text/javascript" src="../../layuiadmin/default.js"></script>
<script>

    // layui
    layui.config({
        base: '../../layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index', //主入口模块
        dtree: './lib/layui_extends/dtree',
    }).use(['table', 'form', 'util'], function () {
        // do something ...
        let form = layui.form,
            table = layui.table
            ;

        /*静态变量*/
        const pre = '/role';

        const server = {
                list: pre + '/list',
                add: pre + '/add',
                del: pre + '/delete'
            }, htmlDiv = 'role-div.html'

            ;


        /**
         * tableIns: 表格返回值
         * winIndex: 弹出层索引
         */
        let tableIns, winIndex;

        /*-----------[table]-----------*/
        tableIns = table.render({
            elem: '#LAY-table',
            url: server.list,
            autoSort: false,
            cols: [     [
                {field: 'id', title: 'ID', hide: true},
                {field: 'name', title: '角色名'},
                {field: 'keys', title: '角色标示'},
                {field: 'description', title: '描述'},
                {width: 200, align: 'center', title: '操作', toolbar: '#LAY-table-row-bar'}
            ]]
        });

        // 表格头工具栏监听
        table.on('toolbar(LAY-table)', function (obj) {
            switch (obj.event) {
                case 'add':
                    win.open('新增');
                    break;
                case 'search':
                    break;
                case 'batch_del':
                    break;
                default:
                    break;
            }
        });

        //  行工具监听
        table.on('tool(LAY-table)', function (obj) {
            switch (obj.event) {
                case 'authorize':
                    // 角色授权菜单
                    break;
                case 'edit':
                    win.open('编辑', obj.data.id);
                    break;
                case 'del':
                    layer.confirm('确认删除角色吗?', {icon: 2, title: '删除'}, function (index) {
                        $.get(server.del + '/' + obj.data.id, function (res) {
                            if (res.code !== 0) {
                                layer.msg('操作出错:[' + data.message + ']', {icon: 5});
                            } else {
                                layer.msg('操作成功', {icon: 6});
                                tableIns.reload();
                                layer.close(index);
                            }
                        });
                    });
                    break;
                default:
                    break;
            }
        });


        /*-----------[form]-----------*/
        // 监听radio
        //todo 监听
        form.on('radio(type)', function (data) {
            console.log(data.value);
        });


        /*-----------[弹出层]-----------*/
        const win = {
            open: function (title, id) {
                return layer.open({
                    type: 2,
                    title: title,
                    area: ['550px', '550px'],
                    content: htmlDiv,
                    btn: ['提交', '重置', '关闭'],
                    yes: function (index, layero) {
                        layero.find('iframe').contents().find('#LAY-form-submit').click();

                        return false; //禁止点击该按钮关闭
                    },
                    btn2: function (index, layero) {
                        return false;
                    },
                    success: function (layero, index) {
                        $('#LAY-form-display').removeClass('layui-hide');
                        // 触发详情
                        if (id){
                            // 给id标签赋值
                            let body = layer.getChildFrame('body', index);
                            body.find('[name="id"]').val(id);
                            // 触发按钮获取详情
                            let btn = layero.find('iframe').contents().find("#getBtn");
                            btn.click();
                        }
                        //form.render();
                    }
                });
            },
            close: function (index) {
                layer.close(index);
            }
        };

    });
</script>

</body>
</html>